<template>
	<div class="min-h-screen bg-white flex">
		<!-- Left Navigation (保持不变) -->
		<div class="left-nav">
			<!-- Avatar -->
			<div class="avatar-container">
				<img src="../assets/avatar.jpg" class="avatar-image" alt="Developer Avatar">
			</div>

			<!-- Name -->
			<h2 class="name">杜伟毅</h2>

			<!-- Navigation -->
			<nav class="nav-menu">
				<el-button v-for="item in navItems" :key="item.name" class="nav-button"
					:class="{ 'active-nav': activeNav === item.name }" @click="activeNav = item.name">
					<el-icon class="nav-icon">
						<component :is="item.icon" />
					</el-icon>
					<span class="nav-text">{{ item.name }}</span>
				</el-button>
			</nav>
		</div>

		<!-- Main Content -->
		<div class="main-content">
			<!-- Resume Section -->
			<section v-if="activeNav === '简历'" class="section">
				<div class="resume-layout">
					<div class="resume-sidebar">
						<div class="sidebar-card">
							<h3 class="sidebar-title">全栈开发者</h3>
							<p class="sidebar-description">掌握SpringBoot+Mybatis-Plus+Vue/React技术栈，具备全栈开发能力</p>
							<div class="contact-info">
								<div class="contact-item">
									<el-icon>
										<Iphone />
									</el-icon>
									<span>180-7660-8021</span>
								</div>
								<div class="contact-item">
									<el-icon>
										<Message />
									</el-icon>
									<span>duweiyi2002@foxmail.com</span>
								</div>
							</div>
							<div class="personal-info">
								<p><strong>性别:</strong> 男</p>
								<p><strong>政治面貌:</strong> 共产党员</p>
								<p><strong>求职意向:</strong> Java开发</p>
								<p><strong>期望薪资:</strong> 3-4K</p>
							</div>
						</div>
					</div>

					<div class="resume-main">
						<div class="main-card">
							<div class="card-header">
								<h2 class="card-title">杜伟毅 - 个人简历</h2>
							</div>

							<div class="resume-scroll-container">
								<div class="resume-content">
									<div class="section">
										<h3 class="section-title">个人优势</h3>
										<ul class="advantage-list">
											<li><strong>后端开发:</strong> 掌握SpringBoot+Mybatis-Plus技术栈，可独立开发RESTful
												API接口，配合MySQL完成3个以上课程项目数据库设计。</li>
											<li><strong>前端开发:</strong>
												熟练使用Vue/React框架开发SPA应用，具备uni-app多端开发经验，熟悉ElementUI等组件库快速实现响应式界面。</li>
											<li><strong>工程化开发:</strong>
												基于IDEA+Maven搭建微服务项目架构，使用Git进行团队协作开发，参与过5人规模的敏捷开发项目。
											</li>
											<li><strong>部署运维:</strong> 掌握Windows环境下Docker多容器编排，成功部署过Spring
												Boot项目，实现服务弹性扩展。
											</li>
											<li><strong>性能优化:</strong> 运用Redis缓存热点数据，在课程项目中使查询响应时间降低40%以上。</li>
										</ul>
									</div>

									<div class="section">
										<h3 class="section-title">项目经历</h3>
										<div class="project">
											<h4 class="project-title">云水茗约-茶室预约系统</h4>
											<p class="project-role">独立开发者(前端+后端) | 2025.01-2025.05</p>
											<p class="project-links">
												<span>项目地址: <a
														href="https://gitee.com/du-weiyi2002/Cloud-Water-Tea-Appointment.git"
														target="_blank">Gitee</a></span>
												<span>线上地址: <a href="http://www.dwy2002.cn:3000"
														target="_blank">www.dwy2002.cn:3000</a></span>
												<span>测试账号: 18076608021 密码: 123456789</span>
											</p>
											<p class="project-description">
												基于对茶文化的兴趣，独立设计并实现了一个轻量级茶室预约管理系统，包含用户预约、会员体系等功能。通过该项目巩固全栈开发能力，并学习如何从0到1落地业务需求。
											</p>
											<div class="project-details">
												<h5>我的工作与成果:</h5>
												<ul>
													<li>使用Vue3+Element-Plus完成用户端预约界面开发，实现动态时间选择、座位可视化展示</li>
													<li>基于SpringBoot搭建RESTful接口，完成预约单状态流转(提交/取消/完成)的核心逻辑</li>
													<li>独立设计数据库表结构(MySQL)，整合JWT+Redis实现用户认证与高频查询缓存优化</li>
													<li>首次尝试消息队列(RabbitMQ)，通过异步处理解决预约超时自动取消的定时任务问题</li>
													<li>为提升用户体验，引入ECharts开发管理端的数据看板，直观展示客流量高峰时段</li>
													<li>通过阿里云OSS实现茶文化知识模块的图片上传功能，学习云存储集成</li>
												</ul>
											</div>
										</div>
									</div>

									<div class="section">
										<h3 class="section-title">教育经历</h3>
										<p>广西科技师范学院</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>


			<!-- Projects Section -->
			<section v-if="activeNav === '项目'" class="section">
				<div class="section-header">
					<h2 class="section-title">项目展示</h2>
					<div class="search-box">
						<el-input v-model="searchQuery" placeholder="搜索项目..." class="search-input">
							<template #prefix>
								<el-icon>
									<Search />
								</el-icon>
							</template>
						</el-input>
					</div>
				</div>

				<el-skeleton :loading="loadingProjects" animated>
					<template #default>
						<div class="project-grid">
							<el-card v-for="project in filteredProjects" :key="project.id" class="project-card"
								shadow="hover">
								<div class="project-image-container">
									<img :src="project.image" class="project-image" :alt="project.title">
								</div>
								<div class="project-content">
									<h3 class="project-title">{{ project.name }}</h3>
									<!-- 介绍 -->
									<p class="project-description">
										{{ project.description }}
									</p>
									<!-- 地址 -->
									<div class="project-links">
										<el-link v-if="project.gitUrl" :href="project.gitUrl" target="_blank"
											type="primary">
											<el-icon>
												<Link />
											</el-icon>
											Git仓库
										</el-link>
										<el-link v-if="project.onlineUrl" :href="project.onlineUrl" target="_blank"
											type="primary">
											<el-icon>
												<Link />
											</el-icon>
											上线地址
										</el-link>
									</div>
									<div class="project-footer">
										<div class="project-date">
											<el-icon>
												<Clock />
											</el-icon>
											<span>{{ formatDate(project.createTime) }}</span>
										</div>
									</div>
								</div>
							</el-card>

						</div>
					</template>
					<template #template>
						<div class="project-grid">
							<el-card v-for="i in 6" :key="i" class="project-card" shadow="hover">
								<el-skeleton-item variant="image" style="height: 192px" />
								<div style="padding: 20px;">
									<el-skeleton-item variant="h3" style="width: 50%" />
									<div style="margin: 16px 0;">
										<el-skeleton-item variant="text" style="width: 30%" />
									</div>
									<el-skeleton-item variant="text" style="width: 100%" />
									<el-skeleton-item variant="text" style="width: 80%" />
									<div style="margin-top: 16px; display: flex; justify-content: space-between;">
										<el-skeleton-item variant="text" style="width: 40%" />
										<el-skeleton-item variant="text" style="width: 20%" />
									</div>
								</div>
							</el-card>
						</div>
					</template>
				</el-skeleton>
			</section>

			<!-- Blog Section -->
			<section v-if="activeNav === '博客'" class="section">
				<h2 class="section-title">技术文章</h2>

				<el-skeleton :loading="loadingArticles" animated>
					<template #default>
						<div class="article-list">
							<el-card v-for="article in articles" :key="article.id" class="article-card" shadow="hover">
								<div class="article-header">
									<h3 class="article-title">{{ article.title }}</h3>
									<span class="article-date">{{ formatDate(article.createTime) }}</span>
								</div>

								<p class="article-summary">{{ article.description }}</p>

								<div class="article-footer">
									<el-tag >点击阅读全文--></el-tag>
									<el-button text class="article-read-button">
										<el-link v-if="article.content" :href="article.content" target="_blank"
											type="primary">
											<el-icon>
												<Document />
											</el-icon>
											阅读全文
										</el-link>
									</el-button>
								</div>
							</el-card>
						</div>
					</template>
					<template #template>
						<div class="article-list">
							<el-card v-for="i in 3" :key="i" class="article-card" shadow="hover">
								<div style="padding: 24px;">
									<div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
										<el-skeleton-item variant="h3" style="width: 60%" />
										<el-skeleton-item variant="text" style="width: 20%" />
									</div>
									<el-skeleton-item variant="text" style="width: 100%" />
									<el-skeleton-item variant="text" style="width: 80%" />
									<div style="margin-top: 16px; display: flex; justify-content: space-between;">
										<el-skeleton-item variant="text" style="width: 20%" />
										<el-skeleton-item variant="text" style="width: 20%" />
									</div>
								</div>
							</el-card>
						</div>
					</template>
				</el-skeleton>
			</section>


			<section v-if="activeNav === '后台'" class="section">
				<el-button text class="article-read-button" @click="goToHome">
					跳转后台
				</el-button>
			</section>

		</div>
	</div>
</template>

<script>
	export default {
		name: 'indexView',
	};
</script>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {
		Document,
		Folder,
		Star,
		Notebook,
		Iphone,
		Message,
		Download,
		View,
		Share,
		SwitchButton as Switch,
		Search,
		Clock,
		Right,
		ForkSpoon
	} from '@element-plus/icons-vue'
	import {
		listAllProjects
	} from '@/api/projects.js'
	import {
		getAllArticles
	} from '@/api/article.js'
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()

	const activeNav = ref('简历')
	const searchQuery = ref('')
	const loadingProjects = ref(false)
	const loadingArticles = ref(false)
	const projectsData = ref([])
	const articlesData = ref([])

	const navItems = [{
			name: '简历',
			icon: Document
		},
		{
			name: '项目',
			icon: Folder
		},
		{
			name: '博客',
			icon: Notebook
		},
		{
			name: '后台',
			icon: Star
		}
	]

	//工具函数:过滤项目描述
	const truncate = (value, length) => {
		if (!value) return '暂无描述'
		if (value.length <= length) return value
		return value.substring(0, length) + '...'
	}

	// 格式化日期
	const formatDate = (dateString) => {
		if (!dateString) return ''
		const date = new Date(dateString)
		return date.toLocaleDateString()
	}

	// 获取项目数据
	const fetchProjects = async () => {
		try {
			loadingProjects.value = true
			const response = await listAllProjects()
			if (response.code === 200) {
				projectsData.value = response.data
			}
		} catch (error) {
			console.error('获取项目数据失败:', error)
		} finally {
			loadingProjects.value = false
		}
	}

	// 获取文章数据
	const fetchArticles = async () => {
		try {
			loadingArticles.value = true
			const response = await getAllArticles()
			if (response.code === 200) {
				articlesData.value = response.data
			}
		} catch (error) {
			console.error('获取文章数据失败:', error)
		} finally {
			loadingArticles.value = false
		}
	}

	// 计算属性 - 过滤项目
	const filteredProjects = computed(() => {
		if (!searchQuery.value) return projectsData.value
		return projectsData.value.filter(project =>
			project.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
			project.content.toLowerCase().includes(searchQuery.value.toLowerCase())
		)
	})

	// 计算属性 - 文章
	const articles = computed(() => {
		return articlesData.value
	})

	const goToHome = () => {
		router.push('/login')
	}

	// 生命周期钩子
	onMounted(() => {
		fetchProjects()
		fetchArticles()
	})
</script>

<style scoped>
	/* Layout */
	.min-h-screen {
		min-height: 100vh;
	}

	.flex {
		display: flex;
	}

	.bg-white {
		background-color: white;
	}

	/* Left Navigation */
	.left-nav {
		width: 245px;
		position: fixed;
		height: 100%;
		background-color: white;
		border-right: 1px solid #f3f4f6;
		padding: 24px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.avatar-container {
		width: 128px;
		height: 128px;
		border-radius: 50%;
		overflow: hidden;
		margin-bottom: 16px;
	}

	.avatar-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.name {
		font-size: 1.5rem;
		font-weight: bold;
		color: #1e40af;
		margin-bottom: 32px;
	}

	.nav-menu {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.nav-button {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 12px 16px;
		border-radius: 8px;
		border: none;
		background-color: transparent;
		transition: all 0.2s ease-in-out;
	}

	.nav-button:hover {
		background-color: #eff6ff;
	}

	.active-nav {
		background-color: #dbeafe;
	}

	.nav-icon {
		color: #1e40af;
		margin-right: 12px;
		font-size: 18px;
	}

	.nav-text {
		color: #1f2937;
	}

	/* Main Content */
	.main-content {
		margin-left: 256px;
		flex: 1;
		padding: 40px;
	}

	.resume-main {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		/* 自动显示垂直滚动条 */
		scrollbar-width: thin;
		/* 更细的滚动条（Firefox支持） */
	}

	.section {
		margin-bottom: 64px;
	}

	.section-title {
		font-size: 1.5rem;
		font-weight: bold;
		color: #1e40af;
		margin-bottom: 32px;
	}

	/* Resume Section */
	.resume-layout {
		display: flex;
		gap: 20px;
		max-width: 1200px;
		margin: 0 auto;
		height: calc(100vh - 100px);
	}

	.resume-sidebar {
		width: 300px;
		padding-right: 32px;
	}

	.sidebar-card,
	.main-card {
		background-color: white;
		border-radius: 8px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
		padding: 20px;
	}

	.sidebar-title {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.sidebar-description {
		color: #4b5563;
		margin-bottom: 24px;
	}

	.contact-info {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: 20px;
	}

	.contact-item {
		display: flex;
		align-items: center;
		color: #374151;
		gap: 8px;
		margin-bottom: 8px;
	}

	.contact-item .el-icon {
		color: #1e40af;
		margin-right: 8px;
	}

	.resume-main {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
	}

	.resume-scroll-container {
		flex: 1;
		overflow-y: auto;
		padding-right: 10px;
		margin-top: 10px;
	}

	.resume-scroll-container::-webkit-scrollbar {
		width: 6px;
	}

	.resume-scroll-container::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 10px;
	}

	.resume-scroll-container::-webkit-scrollbar-thumb {
		background: #c1c1c1;
		border-radius: 10px;
	}

	.resume-scroll-container::-webkit-scrollbar-thumb:hover {
		background: #a8a8a8;
	}

	.resume-content {
		padding: 20px 0;
	}

	.project {
		margin-bottom: 25px;
	}

	.project-title {
		font-size: 16px;
		margin-bottom: 5px;
		color: #1e40af;
	}

	.project-role {
		color: #666;
		margin-bottom: 10px;
	}

	.project-links {
		margin: 10px 0;
		display: flex;
		gap: 10px;
		font-size: 14px;
	}

	.project-links .el-link {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.project-links a {
		color: #409eff;
		text-decoration: none;
	}

	.project-description {
		margin-bottom: 15px;
		line-height: 1.6;
	}

	.project-details h5 {
		margin-bottom: 10px;
	}

	.project-details ul {
		padding-left: 20px;
		line-height: 1.8;
	}

	.advantage-list {
		padding-left: 20px;
		line-height: 1.8;
	}

	.advantage-list li {
		margin-bottom: 8px;
	}

	.card-header {
		margin-bottom: 15px;
	}

	.card-title {
		font-size: 22px;
		margin: 0;
	}

	/* Projects Section */
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32px;
	}

	.search-box {
		width: 256px;
		position: relative;
	}

	.search-input {
		width: 100%;
	}

	.project-grid,
	.repo-grid {
		display: grid;
		gap: 24px;
	}

	.project-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.project-card,
	.repo-card {
		border: 1px solid #f3f4f6;
		border-radius: 12px;
		transition: all 0.2s ease-in-out;
	}

	.project-card:hover,
	.repo-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.project-image-container {
		height: 192px;
		overflow: hidden;
	}

	.project-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.3s ease;
	}

	.project-card:hover .project-image {
		transform: scale(1.05);
	}

	.project-content {
		padding: 20px;
	}

	.project-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 12px;
	}

	.project-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.project-date {
		display: flex;
		align-items: center;
		font-size: 0.875rem;
		color: #6b7280;
	}

	.project-date .el-icon {
		margin-right: 4px;
	}

	.project-detail-button {
		display: flex;
		align-items: center;
		color: #1e40af;
	}

	.project-detail-button:hover {
		color: #1d4ed8;
	}

	.project-detail-button .el-icon {
		margin-right: 4px;
	}

	/* Open Source Section */
	.repo-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.repo-card {
		padding: 20px;
	}

	.repo-header {
		display: flex;
		align-items: center;
		margin-bottom: 16px;
	}

	.repo-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: #f3f4f6;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: transform 0.2s ease-in-out;
	}

	.repo-card:hover .repo-icon {
		transform: scale(1.1);
	}

	.repo-icon .el-icon {
		color: #f59e0b;
		font-size: 1.25rem;
	}

	.repo-title {
		font-size: 1.125rem;
		font-weight: bold;
		color: #1e40af;
		margin-left: 12px;
	}

	.repo-description {
		color: #4b5563;
		margin-bottom: 16px;
	}

	.repo-stats {
		display: flex;
		justify-content: space-between;
		font-size: 0.875rem;
		color: #6b7280;
		margin-bottom: 16px;
	}

	.stat-item {
		display: flex;
		align-items: center;
	}

	.stat-item .el-icon {
		margin-right: 4px;
	}

	.repo-button {
		width: 100%;
		padding: 8px 0;
		background-color: #f3f4f6;
		color: #1e40af;
		border: none;
	}

	.repo-button:hover {
		background-color: #dbeafe;
	}

	/* Blog Section */
	.article-list {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.article-card {
		border: 1px solid #f3f4f6;
		border-radius: 12px;
		padding: 24px;
		transition: all 0.2s ease-in-out;
	}

	.article-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.article-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 16px;
	}

	.article-title {
		font-size: 1.25rem;
		font-weight: bold;
		color: #1e40af;
	}

	.article-date {
		font-size: 0.875rem;
		color: #6b7280;
	}

	.article-summary {
		color: #4b5563;
		margin-bottom: 16px;
	}

	.article-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.article-tag {
		background-color: #f3f4f6;
		color: #4b5563;
	}

	.article-read-button {
		display: flex;
		align-items: center;
		color: #1e40af;
	}

	.article-read-button:hover {
		color: #1d4ed8;
	}

	.article-read-button .el-icon {
		margin-right: 4px;
	}

	/* Responsive adjustments */
	@media (max-width: 1024px) {

		.project-grid,
		.repo-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 768px) {
		.left-nav {
			width: 100%;
			position: static;
			height: auto;
		}

		.main-content {
			margin-left: 0;
		}

		.resume-layout {
			flex-direction: column;
		}

		.resume-sidebar,
		.resume-main {
			width: 100%;
		}

		.resume-sidebar {
			padding-right: 0;
			margin-bottom: 24px;
		}

		.project-grid,
		.repo-grid {
			grid-template-columns: 1fr;
		}

		.section-header {
			flex-direction: column;
			align-items: flex-start;
			gap: 16px;
		}

		.search-box {
			width: 100%;
		}
	}
</style>